<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>157_冒泡_练习</title>
		<style>
			#box {
				width: 100px;
				height: 100px;
				border-radius: 50px;
				position: absolute;
				background-color: aqua;
			}

			#box2 {
				width: 300px;
				height: 300px;
				background-color: darkgoldenrod;
			}
		</style>
	</head>
	<body>
		<div id="box"></div>
		<div id="box2"></div>
		<script>
			/* 
			使小绿球可以跟随鼠标一起移动
			
			事件的冒泡和元素的样式无关，之和结构相关
			 */
			const box = document.getElementById("box")
			const box2 = document.getElementById("box2")

			//事件绑定到box会比较卡顿，体验不好
			//box.addEventListener("mousemove", function(event) {
			document.addEventListener("mousemove", function(event) {
				box.style.left = event.x + "px"
				box.style.top = event.y + "px"
			})

			//这就跟冒泡有关系 
			box2.addEventListener("mousemove", evnet => {
				event.stopPropagation()
			})
		</script>

	</body>
</html>